<template>
	<div>
		<el-tabs type="border-card" v-model="activeName">
			<el-tab-pane :label="$t('agent.BasicInfo')" name="first">
				<el-form>
					<table class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
						<tbody>
							<tr>
								<td colspan="6" style="text-align: left;">
									<div class="table-head">{{$t('agent.CompanyInfo')}}</div>
								</td>
							</tr>
							<tr>
								<td>{{$t('agent.Name')}}*</td>
								<td><input v-model.lazy="agentData.name" type="text" :disabled="showDetails" /></td>
								<td>{{$t('agent.Type')}}</td>
								<td>
                  <!-- <input v-model="agentData.idType" type="text" :disabled="showDetails" /> -->
                  <el-select :placeholder="$t('placeH.Please')" v-model.lazy="agentData.idType" clearable style="line-height: 40px;" :disabled="showDetails">
                    <el-option :value="$t('mer.LimitedCompany')"></el-option>
                    <el-option :value="$t('mer.Partnership')"></el-option>
                    <el-option :value="$t('mer.SoleProprietor')"></el-option>
                  </el-select>
                </td>
								<td>{{$t('agent.Address')}}*</td>
								<td><input v-model.lazy="agentData.address" type="text" :disabled="showDetails" /></td>
							</tr>
							<tr>
								<td>{{$t('agent.MailAddr')}}</td>
								<td><input v-model.lazy="agentData.mailingAddress" type="text" :disabled="showDetails" /></td>
								<td>{{$t('mer.BRNo')}}*</td>
								<td><input v-model.lazy="agentData.registrationNumber" type="number" :disabled="showDetails" /></td>
								<td>{{$t('agent.Contact')}}*</td>
								<td><input v-model.lazy="agentData.contacts" type="text" :disabled="showDetails" /></td>
							</tr>
							<tr>
								<td>{{$t('mec.Email')}}</td>
								<td><input v-model.lazy="agentData.email" type="text" :disabled="showDetails" /></td>
								<td>{{$t('agent.PhoneNo')}}*</td>
								<td><input v-model.lazy="agentData.phone" type="number" :disabled="showDetails" /></td>
								<td>{{$t('agent.MobileNo')}}*</td>
								<td><input v-model.lazy="agentData.telephone" type="number" :disabled="showDetails" /></td>
							</tr>

							<tr>
								<td colspan="6" style="height: 22px;"></td>
							</tr>

							<tr>
								<td colspan="6" style="text-align: left;">
									<div class="table-head">{{$t('mec.SettlementInfo')}}</div>
								</td>
							</tr>
							<tr>
								<td>{{$t('agent.Method')}}*</td>
								<td>
                  <!-- <input v-model="agentData.clearingMode" type="text" :disabled="showDetails" /> -->
                  <el-select  :placeholder="$t('placeH.Please')" v-model.lazy="agentData.clearingMode" clearable style="line-height: 40px;" :disabled="showDetails">
                    <el-option :value="$t('cash.check')"></el-option>
                    <el-option :value="$t('cash.onlineBanking')"></el-option>
					    	  </el-select> 

                  <!-- <el-select v-else :placeholder="$t('placeH.Please')" v-model.lazy="agentData.clearingMode" clearable style="line-height: 40px;" :disabled="showDetails">
                    <el-option :value="$t('cash.check')"></el-option>
                    <el-option :value="$t('cash.onlineBanking')"></el-option>
					    	  </el-select>  -->

                </td>
								<td>{{$t('mer.BankName')}}*</td>
								<td><input v-model.lazy="agentData.bankname" type="text" :disabled="showDetails" /></td>
                <td>{{$t('mer.BankCode1')}}</td>
                <td><input v-model.lazy="agentData.bankCode" type="text" :disabled="showDetails" /></td>
								
							</tr>
							<tr>
                <td>{{$t('mer.AccountName')}}*</td>
								<td><input v-model.lazy="agentData.drawname" type="text" :disabled="showDetails" /></td>
								<td>{{$t('mer.AccountNo')}}*</td>
								<td><input v-model.lazy="agentData.bankaccount" type="number" :disabled="showDetails" /></td>
								<td>SWIFT</td>
								<td><input v-model.lazy="agentData.SWIFTcode" type="number" :disabled="showDetails" /></td>
							</tr>

							<tr>
								<td colspan="6" style="height: 22px;"></td>
							</tr>

							<tr>
								<td colspan="6" style="text-align: left;">
									<div class="table-head">{{$t('agent.CommissionInfo')}}</div>
								</td>
							</tr>
							<tr>
								<td>POS{{currency}}*</td>
								<td><input v-model.lazy="agentData.posMachine" type="number" :disabled="showDetails" /></td>
								<td>{{$t('agent.Scanner')+currency}}*</td>
								<td><input v-model.lazy="agentData.scanner" type="number" :disabled="showDetails" /></td>
								<td>{{$t('agent.SubscriptionFee')+currency}}*</td>
								<td><input v-model.lazy="agentData.franchiseFee" type="number" :disabled="showDetails" /></td>
							</tr>
							<tr>
								<td>{{$t('agent.OfflineBase')}}*</td>
								<td><input v-model.lazy="agentData.lineBaseRate" type="number" :disabled="showDetails" /></td>
								<td>{{$t('agent.OnlineBase')}}*</td>
								<td><input v-model.lazy="agentData.onLineBaseRate" type="number" :disabled="showDetails" /></td>
								<td>{{$t('agent.OfflineComm')}}*</td>
								<td><input v-model.lazy="agentData.lineBrokerage" type="number" :disabled="showDetails" /></td>
							</tr>
							<tr>
								<td>{{$t('agent.OnlineComm')}}*</td>
								<td><input v-model.lazy="agentData.onLineBrokerage" type="number" :disabled="showDetails" /></td>
								<td>{{$t('agent.EndDate')}}</td>
								<td><el-date-picker v-model.lazy="agentData.shutDownDate" :placeholder="$t('placeH.Please')" :editable=false type="date" :disabled="showDetails"></el-date-picker></td>
								<td>{{$t('search.UpperLevel1')}}*</td>
								<td>
									<el-select v-model.lazy="agentData.parentName" @change='selectId()' clearable :placeholder="$t('placeH.Please')" :disabled="showDetails">
										<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name">
										</el-option>
									</el-select>
								</td>
							</tr>
							<tr>
								<td>{{$t('agent.UpperLevelID')}}*</td>
								<td><input v-model.lazy="agentData.parentId" type="text" disabled="disabled" /></td>
								<td>{{$t('salesman.Salesman')}}</td>
								<td>
									<el-select v-model.lazy="agentData.salesmanName" @change='selectSalesman()' clearable :placeholder="$t('placeH.Please')" :disabled="showDetails">
										<el-option v-for="item in selectSalesmanData" :label="item.salesmanName" :value="item.salesmanName" :key="item.id">
										</el-option>
									</el-select>
								</td>
								<td>{{$t('agent.BDStaffNo')}}</td>
								<td><input v-model.lazy="agentData.salesmanNumber" type="text" disabled="disabled" /></td>
							</tr>
							<tr>
								<td>{{$t('agent.commissionRatio')}}</td>
								<td><input v-model.lazy="agentData.proportion" type="number" :disabled="showDetails" /></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						</tbody>
					</table>
					<div class="btn-box">
						<el-button class="blue-btn small-btn" @click="cancel()">{{$t('button.Cancel')}}</el-button>
						<el-button class="blue-btn small-btn" v-if='isAdd' @click="addAgent()">{{$t('salesman.OK')}}</el-button>
						<el-button class="blue-btn small-btn" v-if='isModify' @click='modify()'>{{$t('button.Modify')}}</el-button>
						<el-button class="blue-btn small-btn" v-show='showBtn' @click='commitModify()'>{{ this.state === '0' ? $t('button.Resubmit') : $t('button.OK') }}</el-button>
					</div>
				</el-form>
			</el-tab-pane>
			<el-tab-pane :label="$t('salesman.Salesman')" name="second" v-if='showSalesman'>
				<div style="text-align: right;">
					<el-button type="primary" v-if='ifNewSalesman' size="small" @click="addSalesman()">{{$t('button.NewSalesman')}}</el-button>
					<el-button type="primary" size="small" @click='Jump()'>{{$t('button.Return')}}</el-button>
				</div>
				<div class="table-border">
					<!--业务员信息-->
					<el-table :data="salesmanData" style="width: 100%;" height=400>
						<el-table-column type="index" fixed :label="$t('index.Number')" width="80">
						</el-table-column>
						<el-table-column prop="salesmanNumber" :label="$t('agent.BDStaffNo')" width="150">
						</el-table-column>
						<el-table-column prop="salesmanName" :label="$t('salesman.Name')" width="120">
						</el-table-column>
						<el-table-column v-if="this.companyId === '2' ? false : true" prop="legalPersonIdNumber" :label="$t('salesman.ID')" width="150">
						</el-table-column>
						<el-table-column prop="phone" :label="$t('mec.Phone')" width="150">
						</el-table-column>
						<el-table-column prop="email" :label="$t('mec.Email')" width="150">
						</el-table-column>
						<el-table-column prop="addDate" :label="$t('mec.CreationTime')" width="200">
						</el-table-column>
						<el-table-column prop="state" :label="$t('salesman.Status')" width="120" :formatter="judgeState">
						</el-table-column>
						<el-table-column :label="$t('index.Operation')" width="170">
							<template scope="scope">
								<el-button type="text" class="blue-btn mini-btn" @click='modifySalesmanData(scope.row)'>{{$t('button.Modify')}}</el-button>
								<el-button type="text" class="blue-btn mini-btn" v-if='scope.row.enabled === false' @click='stopOrStart(scope.row.enabled,scope.row.id,scope.row.salesmanNumber)' >{{$t('button.Enabled')}}</el-button>
								<el-button type="text" class="blue-btn mini-btn" v-if='scope.row.enabled === true' @click='stopOrStart(scope.row.enabled,scope.row.id,scope.row.salesmanNumber)' >{{$t('button.Suspended')}}</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-container">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="obj.page" :page-sizes="[10,20,30,50]" :page-size="obj.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
					</div>
					<!--澳洲新增业务员-->
					<el-dialog :title="$t('salesman.NewBDStaff')" :visible.sync="dialogFormVisible" v-if="this.companyId === '2' ? true : false ">
						<el-form :model="addForm" :rules="AuRules" ref="addForm">
							<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
								<el-input v-model.lazy="addForm.salesmanName" auto-complete="off" :maxlength='25'></el-input>
							</el-form-item>
							<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
								<el-input v-model.lazy="addForm.salesmanNumber" auto-complete="off" @blur='validateNum(addForm)' :maxlength='10'></el-input>
							</el-form-item>
							<el-form-item :label="$t('mer.PhoneNo')" label-width="100px" prop="phone">
								<el-input v-model.lazy="addForm.phone" auto-complete="off" :maxlength='11'></el-input>
							</el-form-item>
							<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
								<el-input v-model.lazy="addForm.email" auto-complete="off" :maxlength='50'></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="dialogFormVisible = false">{{$t('button.Cancel')}}</el-button>
							<el-button type="primary" @click="submitForm('Au')">{{$t('button.OK')}}</el-button>
						</div>
					</el-dialog>
					<!--香港新增业务员-->
					<el-dialog :title="$t('salesman.NewBDStaff')" :visible.sync="dialogFormVisible" v-else>
						<el-form :model="addForm" :rules="HKRules" ref="addForm">
							<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
								<el-input v-model.lazy="addForm.salesmanName" auto-complete="off" :maxlength='25'></el-input>
							</el-form-item>
							<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
								<el-input v-model.lazy="addForm.salesmanNumber" auto-complete="off" @blur='validateNum(addForm)' :maxlength='10'></el-input>
							</el-form-item>
							<el-form-item :label="$t('salesman.ID1')" label-width="100px" prop="legalPersonIdNumber">
								<el-input v-model.lazy="addForm.legalPersonIdNumber" auto-complete="off" :maxlength='20'></el-input>
							</el-form-item>
							<el-form-item :label="$t('mer.PhoneNo')" label-width="100px" prop="phone">
								<el-input v-model.lazy="addForm.phone" auto-complete="off" :maxlength='11'></el-input>
							</el-form-item>
							<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
								<el-input v-model.lazy="addForm.email" auto-complete="off" :maxlength='50'></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="dialogFormVisible = false">{{$t('button.Cancel')}}</el-button>
							<el-button type="primary" @click="submitForm('KH')">{{$t('button.OK')}}</el-button>
						</div>
					</el-dialog>

					<!--澳洲修改业务员-->
					<el-dialog :title="$t('salesman.ModifyTheSalesmanInformation')" :visible.sync="dialogModifyFormVisible" :before-close="handleClose" v-if="this.companyId === '2' ? true : false ">
						<el-form :model="modifyForm" :rules="AuRules" ref="modifyForm">
							<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
								<el-input v-model.lazy="modifyForm.salesmanName" auto-complete="off" :maxlength='25' :disabled=true></el-input>
							</el-form-item>
							<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
								<el-input v-model.lazy="modifyForm.salesmanNumber" auto-complete="off" :maxlength='10' :disabled=true></el-input>
							</el-form-item>
							<el-form-item :label="$t('mer.PhoneNo')" label-width="100px" prop="phone">
								<el-input v-model.lazy="modifyForm.phone" auto-complete="off" :maxlength='11'></el-input>
							</el-form-item>
							<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
								<el-input v-model.lazy="modifyForm.email" auto-complete="off" :maxlength='50'></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="handleClose">{{$t('button.Cancel')}}</el-button>
							<el-button type="primary" @click="modifyFormData('Au')">{{$t('button.Modify')}}</el-button>
						</div>
					</el-dialog>
					<!--香港修改业务员-->
					<el-dialog :title="$t('salesman.ModifyTheSalesmanInformation')" :visible.sync="dialogModifyFormVisible" :before-close="handleClose" v-else>
						<el-form :model="modifyForm" :rules="HKRules" ref="modifyForm">
							<el-form-item :label="$t('salesman.Name')" label-width="100px" prop="salesmanName">
								<el-input v-model.lazy="modifyForm.salesmanName" auto-complete="off" :maxlength='25' :disabled=true></el-input>
							</el-form-item>
							<el-form-item :label="$t('agent.BDStaffNo')" label-width="100px" prop="salesmanNumber">
								<el-input v-model.lazy="modifyForm.salesmanNumber" auto-complete="off" :maxlength='10' :disabled=true></el-input>
							</el-form-item>
							<el-form-item :label="$t('salesman.ID1')" label-width="100px" prop="legalPersonIdNumber">
								<el-input v-model.lazy="modifyForm.legalPersonIdNumber" auto-complete="off" :maxlength='20'></el-input>
							</el-form-item>
							<el-form-item :label="$t('mer.PhoneNo')" label-width="100px" prop="phone">
								<el-input v-model.lazy="modifyForm.phone" auto-complete="off" :maxlength='11'></el-input>
							</el-form-item>
							<el-form-item :label="$t('mec.Email')" label-width="100px" prop="email">
								<el-input v-model.lazy="modifyForm.email" auto-complete="off" :maxlength='50'></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="handleClose">{{$t('button.Cancel')}}</el-button>
							<el-button type="primary" @click="modifyFormData('HK')">{{$t('button.Modify')}}</el-button>
						</div>
					</el-dialog>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import {
  createAgent,
  agentDetails,
  modifyAgent,
  salesmanAll,
  salesmanAdd,
  querySuperiorAgent,
  validateSalesmanNum,
  modifySalesman,
  salesmanList
} from "api/merchant/agent/index";
export default {
  name: "agent",
  props: ["id", "distributorId", "state"],
  data() {
    return {
      parentDistributorId: "",
      dialogModifyFormVisible: false,
      dialogFormVisible: false,
      activeName: "first",
      showSalesman: this.id === 1 ? false : true,
      isAdd: this.id === 1 ? true : false, //新增按钮显示或隐藏 根据父组件传递的id判断
      isModify: this.id === 2 ? true : false, //修改按钮显示或隐藏 根据父组件传递的id判断
      ifNewSalesman: true,
      showDetails: this.id === 1 ? false : true,
      showBtn: false,
      agentData: {
        name: undefined,
        idType: undefined,
        address: undefined,
        mailingAddress: undefined,
        registrationNumber: undefined,
        contacts: undefined,
        email: undefined,
        phone: undefined,
        telephone: undefined,
        parentName: undefined,
        parentId: undefined,
        clearingMode: undefined,
        bankname: undefined,
        bankaccount: undefined,
        drawname: undefined,
        SWIFTcode: undefined,
        posMachine: undefined,
        scanner: undefined,
        franchiseFee: undefined,
        lineBaseRate: undefined,
        onLineBrokerage: undefined,
        lineBrokerage: undefined,
        onLineBrokerage: undefined,
        shutDownDate: undefined,
        salesmanName: undefined,
        salesmanNumber: undefined,
        proportion: undefined,
        password: undefined,
        debId: undefined,
        salesmanId: undefined
      },
      salesmanData: [],
      addForm: {
        salesmanName: "",
        salesmanNumber: "",
        legalPersonIdNumber: "",
        phone: "",
        email: ""
      },
      modifyForm: {
        salesmanName: "",
        salesmanNumber: "",
        legalPersonIdNumber: "",
        phone: "",
        email: ""
      },
      nullObj: {},
      obj: {
        page: 1,
        pageSize: 10
      },
      res: [],
      HKRules: {
        salesmanName: [
          {
            required: true,
            message: this.$t("hint.PleaseEnterName"),
            trigger: "blur"
          },
          {
            min: 0,
            max: 20,
            message: this.$t("hint.LengthIsMax25Characters"),
            trigger: "blur"
          }
        ],
        salesmanNumber: [
          {
            required: true,
            message: this.$t("hint.PleaseEnterBDStaffNumber"),
            trigger: "blur"
          },
          {
            min: 0,
            max: 10,
            message: this.$t("hint.LengthIsMax10Characters"),
            trigger: "blur"
          }
        ],
        legalPersonIdNumber: [
          {
            required: true,
            message: this.$t("hint.PleaseEnterIDNumber"),
            trigger: "blur"
          },
          {
            min: 0,
            max: 20,
            message: this.$t("hint.LengthIsMax20Characters"),
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: this.$t("hint.PleaseEnterPhoneNumber"),
            trigger: "blur"
          },
          {
            min: 0,
            max: 11,
            message: this.$t("hint.LengthIsMax11Characters"),
            trigger: "blur"
          }
        ]
      },
      AuRules: {
        salesmanName: [
          {
            required: true,
            message: this.$t("hint.PleaseEnterName"),
            trigger: "blur"
          },
          {
            min: 0,
            max: 20,
            message: this.$t("hint.LengthIsMax25Characters"),
            trigger: "blur"
          }
        ],
        salesmanNumber: [
          {
            required: true,
            message: this.$t("hint.PleaseEnterBDStaffNumber"),
            trigger: "blur"
          },
          {
            min: 0,
            max: 10,
            message: this.$t("hint.LengthIsMax10Characters"),
            trigger: "blur"
          }
        ],
        email: [
          {
            required: true,
            message: this.$t("hint.PleaseEnterEmail"),
            trigger: "blur"
          },
          {
            min: 0,
            max: 20,
            message: this.$t("hint.LengthIsMax50Characters"),
            trigger: "blur"
          }
        ]
      },
      options: [],
      selectSalesmanData: [],
      companyId: localStorage.getItem("companyId"),
      userType: localStorage.getItem("userType"),
      selDistributorId: localStorage.getItem("distributorId"),
      selAgentObj: {},
      currency: localStorage.getItem("companyId") === "2" ? " (A$)" : " (HK$)",
      agentRequiredArr: [
        "name",
        "address",
        "registrationNumber",
        "contacts",
        "phone",
        "telephone",
        "clearingMode",
        "bankname",
        "drawname",
        "bankaccount",
        "posMachine",
        "scanner",
        "franchiseFee",
        "lineBaseRate",
        "onLineBaseRate",
        "lineBrokerage",
        "onLineBrokerage",
        "parentName",
        "parentId"
      ],
      flag: false,
      // clearingMode: "",
      salesmanId: null
    };
  },
  created() {
    if (this.state === "1") {
      this.isModify = false;
      this.ifNewSalesman = false;
    }
    if (this.state === "0") {
      // this.isModify = false;
      this.ifNewSalesman = false;
    }
    if (this.userType === "2") {
      this.selAgentObj.distributorId = this.selDistributorId;
      this.getSuperiorAgent(this.selAgentObj);
    } else {
      this.selAgentObj.companyId = this.companyId;
      this.getSuperiorAgent(this.selAgentObj);
    }
    if (this.id === 2) {
      this.getAgentDetails(this.distributorId);
      // this.clearingMode = this.agentData.clearingMode;
      this.obj.distributorId = this.distributorId;
      this.getSalesmanList(this.obj);
      // console.log(this.clearingMode);
    }
    //			console.log(this.id);
  },
  methods: {
    //格式化业务员当前状态
    judgeState(row) {
      let state = row.state;
      return (state =
        state === "1"
          ? this.$t("button.Suspended")
          : this.$t("button.Enabled"));
    },
    stopOrStart(enabled, id, salesmanNumber) {
      const salesmanInfo = enabled === false ? this.$t("button.Enabled2") : this.$t("button.Suspended2");
      this.nullObj.enabled = !enabled;
      this.nullObj.id = id;
      this.nullObj.distributorId = this.distributorId;
      this.nullObj.salesmanNumber = salesmanNumber;
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: this.$t("hint.SureTo") + salesmanInfo + this.$t("salesman.theSalesman"),
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel")
      }).then(() => {
        modifySalesman(this.nullObj).then(res => {
          if (res.code === 0) {
            this.dialogModifyFormVisible = false;
            this.$notify({
              title: this.$t("hint.Success"),
              message: salesmanInfo + this.$t("hint.Success1"),
              type: "success",
              duration: 2000
            });
            this.obj.distributorId = this.distributorId;
            this.getSalesmanList(this.obj);
          } else {
            this.$notify({
              title: this.$t("hint.Fail"),
              message: salesmanInfo + this.$t("hint.Fail1"),
              type: "error",
              duration: 2000
            });
          }
        });
      });
    },
    //新增业务员按钮
    addSalesman() {
      //				console.log(this.addForm);
      this.dialogFormVisible = true;
      this.addForm = {};
    },
    //修改业务员信息
    modifyFormData(region) {
      if (region === "Au") {
        this.addForm.legalPersonIdNumber = null;
      }
      if (region === "HK") {
        this.addForm.email =
          this.addForm.email === "" ? null : this.addForm.email;
      }
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: this.$t("hint.SureToChangeInfoOfTheSalesman"),
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel")
      }).then(() => {
        this.modifyForm.distributorId = this.distributorId;
        modifySalesman(this.modifyForm).then(res => {
          if (res.code === 0) {
            this.dialogModifyFormVisible = false;
            this.$notify({
              title: this.$t("hint.Success"),
              message: this.$t("hint.SuccessfullyModified"),
              type: "success",
              duration: 2000
            });
            this.obj.distributorId = this.distributorId;
            this.getSalesmanList(this.obj);
          } else {
            this.$notify({
              title: this.$t("hint.Fail"),
              message: this.$t("hint.FailToEdit"),
              type: "error",
              duration: 2000
            });
          }
        });
      });
    },
    handleClose() {
      this.dialogModifyFormVisible = false;
    },
    modifySalesmanData(data) {
      $.extend(this.modifyForm, data);
      //				this.modifyForm = data;
      this.dialogModifyFormVisible = true;
    },
    Jump() {
      this.$emit("agentManageChange");
    },
    selectSalesman() {
      for (let i = 0; i < this.selectSalesmanData.length; i++) {
        if (
          this.selectSalesmanData[i].salesmanName ===
          this.agentData.salesmanName
        ) {
          this.agentData.salesmanId = this.selectSalesmanData[i].id;
          this.agentData.salesmanNumber = this.selectSalesmanData[
            i
          ].salesmanNumber;
          // this.salesmanId = this.selectSalesmanData[i].id;
        }
      }
    },
    selectId() {
      for (let i = 0; i < this.options.length; i++) {
        if (this.options[i].name === this.agentData.parentName) {
          this.agentData.parentId = this.options[i].id;
          this.parentDistributorId = this.options[i].id;
        }
      }
      let searchSalesman = {};
      searchSalesman.distributorId = this.parentDistributorId;
      salesmanAll(searchSalesman).then(res => {
        this.selectSalesmanData = res.value;
      });
    },
    getSuperiorAgent(data) {
      querySuperiorAgent(data).then(res => {
        //					console.log(res);
        this.options = res.value;
      });
    },
    //验证业务员编号
    validateNum(data) {
      // console.log(data);
      validateSalesmanNum(data.salesmanNumber).then(res => {
        if (res.code === 0) {
          this.$message(this.$t("hint.BDStaffNumberIsValid"));
        } else {
          this.$message.error(this.$t("hint.BDStaffNumberExistsPleaseReEnter"));
        }
      });
    },
    //新增业务员
    submitForm(region) {
      if (region === "Au") {
        this.addForm.legalPersonIdNumber = null;
      }
      if (region === "HK") {
        this.addForm.email =
          this.addForm.email === "" ? null : this.addForm.email;
      }
      this.addForm.distributorId = this.distributorId;
      this.addForm.companyId = this.companyId;
      // console.log(this.addForm);
      salesmanAdd(this.addForm).then(res => {
        // console.log(res);
        if (res.code === 0) {
          this.$notify({
            title: this.$t("hint.Success"),
            message: this.$t("hint.BDRecordCreated"),
            type: "success",
            duration: 2000
          });
          this.dialogFormVisible = false;
          this.obj.distributorId = this.distributorId;
          this.getSalesmanList(this.obj);
        } else {
          this.$notify({
            title: this.$t("hint.Fail"),
            message: this.$t("hint.BDCreateFailed"),
            type: "error",
            duration: 2000
          });
          this.dialogFormVisible = false;
        }
      });
    },
    getAgentDetails(id) {
      agentDetails(id)
        .then(res => {
          this.agentData = res.value;
          // console.log("----该代理商详情---");
          // console.log(res);
          if (this.agentData.clearingMode) {
            let clearingMode = this.agentData.clearingMode;
            if (clearingMode === "0") {
              this.agentData.clearingMode = this.$t("cash.check");
            }
            if (clearingMode === "1") {
              this.agentData.clearingMode = this.$t("cash.onlineBanking");
            }
          } else {
            return false;
          }
        })
        .catch(error => {});
    },
    getSalesmanList(data) {
      salesmanList(data).then(res => {
        // console.log("业务员");
        // console.log(res);
        this.salesmanData = res.value.list;
        this.res = res.value;
      });
    },
    //新增代理商取消按钮
    cancel() {
      if (this.id === 1) {
        this.$emit("agentManageChange");
      } else if (this.state === "1") {
        this.$emit("agentManageChange");
      } else {
        if (this.isModify) {
          this.$emit("agentManageChange");
        } else {
          this.showDetails = true;
          this.showBtn = false;
          this.isModify = true;
        }
      }
    },
    //修改按钮
    modify() {
      this.showDetails = false;
      this.showBtn = true;
      this.isModify = false;
    },
    //代理商修改确定按钮
    commitModify() {
      if (this.clearingMode === "0") {
        this.agentData.clearingMode = this.$t("cash.check");
      }
      if (this.clearingMode === "1") {
        this.agentData.clearingMode = this.$t("cash.onlineBanking");
      }
      if (this.state === "0") {
        this.agentData.state = 4;
      }
      const hintAgentMsg =
        this.state === "0"
          ? this.$t("hint.SureToAddThisAgent")
          : this.$t("hint.SureToChangeInfoOfTheAgent");
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: hintAgentMsg,
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel")
      })
        .then(() => {
          modifyAgent(this.agentData).then(res => {
            if (res.code === 0) {
              this.$msgbox({
                title: this.$t("hint.Alert"),
                message: this.$t("hint.SubmittedApprovalPending"),
                showClose: false,
                showCancelButton: true,
                confirmButtonText: this.$t("button.OK"),
                cancelButtonText: this.$t("button.Cancel")
              })
                .then(() => {
                  this.$emit("agentManageChange");
                })
                .catch(() => {
                  this.agentData = res.value;
                  if (this.agentData.clearingMode) {
                    let clearingMode = this.agentData.clearingMode;
                    if (clearingMode === "0") {
                      this.agentData.clearingMode = this.$t("cash.check");
                    }
                    if (clearingMode === "1") {
                      this.agentData.clearingMode = this.$t(
                        "cash.onlineBanking"
                      );
                    }
                  } else {
                    return false;
                  }
                });
            } else {
              this.$notify({
                title: this.$t("hint.Fail"),
                message: this.$t("hint.FailToEdit"),
                type: "error",
                duration: 2000
              });
              if (this.agentData.clearingMode) {
                let clearingMode = this.agentData.clearingMode;
                if (clearingMode === "0") {
                  this.agentData.clearingMode = this.$t("cash.check");
                }
                if (clearingMode === "1") {
                  this.agentData.clearingMode = this.$t("cash.onlineBanking");
                }
              } else {
                return false;
              }
            }
          });
        })
        .catch(() => {
          done();
        });
    },
    //新增代理商
    addAgent() {
      for (let i = 0; i < this.agentRequiredArr.length; i++) {
        if (
          this.agentData[this.agentRequiredArr[i]] === "" ||
          this.agentData[this.agentRequiredArr[i]] === null ||
          this.agentData[this.agentRequiredArr[i]] === undefined
        ) {
          this.$message(this.$t("hint.MandatoryFieldsAreNotFilledIn"));
          return false;
        } else {
          this.flag = true;
        }
      }
      if (this.flag) {
        this.$msgbox({
          title: this.$t("hint.Alert"),
          message: this.$t("hint.SureToAddThisAgent"),
          showClose: false,
          showCancelButton: true,
          confirmButtonText: this.$t("button.OK"),
          cancelButtonText: this.$t("button.Cancel")
        }).then(() => {
          //			        console.log("确定");
          if (localStorage.getItem("distributorId")) {
            this.agentData.distributorId = localStorage.getItem(
              "distributorId"
            );
          }
          this.agentData.companyId = localStorage.getItem("companyId");
          // this.agentData.salesmanId = this.salesmanId;
          if (this.agentData.clearingMode) {
            let clearingMode = this.agentData.clearingMode;
            if (clearingMode === this.$t("cash.check")) {
              this.agentData.clearingMode = "0";
            }
            if (clearingMode === this.$t("cash.onlineBanking")) {
              this.agentData.clearingMode = "1";
            }
          } else {
            return false;
          }
          createAgent(this.agentData)
            .then(res => {
              if (res.code === 0) {
                this.$notify({
                  title: this.$t("hint.Success"),
                  message: this.$t("hint.CreateOK"),
                  type: "success",
                  duration: 2000
                });
                this.$emit("agentManageChange");
              } else if (res.code === 40005001) {
                this.$notify({
                  title: this.$t("hint.Fail"),
                  message: this.$t("hint.CompanyNameAlreadyExists"),
                  type: "error",
                  duration: 2000
                });
              } else if (res.code === 40004002) {
                this.$notify({
                  title: this.$t("hint.Fail"),
                  message: this.$t("hint.PhoneNumberAlreadyExists"),
                  type: "error",
                  duration: 2000
                });
              } else {
                this.$notify({
                  title: this.$t("hint.Fail"),
                  message: this.$t("hint.CreateFailed"),
                  type: "error",
                  duration: 2000
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        });
      }
    },
    //pageSize 改变时会触发
    handleSizeChange(val) {
      this.obj.pageSize = val;
      this.obj.distributorId = this.distributorId;
      this.getSalesmanList(this.obj);
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.obj.page = val;
      this.obj.distributorId = this.distributorId;
      this.getSalesmanList(this.obj);
    }
  }
};
</script>

<style scoped>

</style>